<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg" style="margin: 0px auto">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>中国地图</h5>
                </div>
                <div class="ibox-content">
                    <div style="height:1200px" id="echarts-map-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript" th:inline="javascript" >
    var myChart = echarts.init(document.getElementById('echarts-map-chart'));
    var option =null;
    var numsa=[];
    var numsb=[];
    var numsc=[];
    var numsd=[];
    var numse=[];
    var numsf=[];
    var numsg=[];
    var numsh=[];
    var numsi=[];
    var numsj=[];
    var numsk=[];
    var numsl=[];
    var numsm=[];
    var numsn=[];
    var numso=[];
    $(document).ready(function () {
        $.ajax({
            url:"/nc/ksWj/optional_a/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsa.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_b/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsb.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_c/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsc.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_d/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsd.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_e/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numse.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_f/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsf.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_g/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsg.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_h/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsh.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_i/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsi.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_j/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsj.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_k/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsk.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_l/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsl.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_m/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsm.push(data[i].id);
                }
                // nums=[data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]
            }

        })
        $.ajax({
            url:"/nc/ksWj/optional_n/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                // alert([data[0].id, data[1].id, data[2].id, data[3].id, data[4].id, data[5].id, data[6].id, data[7].id, data[8].id, data[9].id, data[10].id, data[11].id, data[12].id, data[13].id, data[14].id, data[15].id, data[16].id, data[17].id, data[18].id, data[19].id, data[20].id, data[21].id, data[22].id, data[23].id, data[24].id]);
                for (var i in data){
                    numsn.push(data[i].id);
                }
            }
        })
        $.ajax({
            url:"/nc/ksWj/optional_o/",
            type:'get',
            dataType:"json",
            async:false,
            success:function(data){
                for (var i in data){
                    numso.push(data[i].id);
                }
            }
        })
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['选项A', '选项B', '选项C', '选项D', '选项E', '选项F', '选项G', '选项H', '选项I', '选项J', '选项K', '选项L', '选项M', '选项N', '选项O']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['第一题', '第二题', '第三题', '第四题', '第五题', '第六题', '第七题', '第八题', '第九题', '第十题', '第十一题', '第十二题', '第十三题', '第十四题', '第十五题', '第十六题', '第十七题', '第十八题', '第十九题', '第二十题', '第二十一题', '第二十二题', '第二十三题', '第二十四题', '第二十五题']
        },
        series: [
            {
                name: '选项A',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsa
            },
            {
                name: '选项B',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsb
            },
            {
                name: '选项C',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsc
            },
            {
                name: '选项D',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsd
            },
            {
                name: '选项E',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numse
            },
            {
                name: '选项F',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsf
            },
            {
                name: '选项G',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsg
            },
            {
                name: '选项H',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsh
            },
            {
                name: '选项I',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsi
            },
            {
                name: '选项J',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsj
            },
            {
                name: '选项K',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsk
            },
            {
                name: '选项L',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsl
            },
            {
                name: '选项M',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsm
            },
            {
                name: '选项N',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numsn
            },
            {
                name: '选项O',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: numso
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    })
</script>
</body>
</html>